<template>
    <main>
        <div class="main_left">
            <h5>Digital management platform</h5>
            <el-menu active-text-color="#ffd04b" background-color="#545c64" text-color="#fff"
                class="el-menu-vertical-demo" :menuData="menuData">
                <router-link v-for="menus in store.state.menuData" :key="menus.index" :to="{ path: menus.path }">
                    <el-menu-item :index="menus.index">
                        <el-icon class="iconfont" :class='menus.icon'></el-icon>
                        <template #title>{{ menus.title }}</template>
                    </el-menu-item>
                </router-link>
            </el-menu>
        </div>
        <div class="main_right">
            <router-view></router-view>
        </div>
    </main>
</template>
<script setup>
import httpHelper from '@/api/httpHelper';
import { onMounted, reactive } from 'vue'
/* 引入state */
import { useStore } from "vuex";
import { useRoute } from "vue-router";

onMounted(() => {
    menuLoading();
});

const route = useRoute();
let store = useStore();
let menuData = reactive([]);
const menuLoading = () => {
    let roleId = route.query.roleId;
    httpHelper.get("/power/findByRoleId/" + roleId,
        {},
        (res) => {
            menuData.push(...res.data.data.powers)
            store.commit('saveMenuData', menuData);
        },
        (err) => {
            console.log(err);
        }
    );
};

</script>
<style scoped>
main {
    display: flex;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 210px;
    min-height: 700px;
}

h5 {
    color: #ffd04b;
    background-color: #545c64;
    height: 50px;
    line-height: 50px;
    width: 209.5px;
}

.main_right {
    width: 100%;
}
</style>
